<template>
  <h1>App</h1>

  <!-- 
    自定义事件：
      vue2中，给组件绑定的事件默认都是自定义事件，除非加上.native才是DOM事件
      vue3中，给组件绑定的事件默认都是DOM事件（子组件必须有一个根标签，会给子组件根标签绑定DOM事件）
        除非子组件通过emits声明接受事件，才是自定义事件

        vue3中剔除了$on $off $once方法，不能手动绑定自定义事件。不在支持全局事件总线。
        社区有两个库实现全局事件总线： mitt  tiny-emitter
   -->
  <Child :name="name" :age="age" @click="setAge" />
  <!-- 
      v-model
        vue2中
          子组件接受value属性和input事件
        vue3中
          子组件接受modelValue和update:modelValue事件
    -->
  <Son v-model="count" />
  <!-- 
    v-model:xxx="xxx"
      子组件接受xxx属性和update:xxx事件
      例如：v-model:count="count"
        子组件接受到count属性，和update:count事件
   -->
  <Sister v-model:age="age" v-model:count="count" />

  <Test>
    <template v-slot="{ age }">
      <header>test header {{ age }}</header>
    </template>
    <template #footer="{ age }">
      <footer>test footer {{ age }}</footer>
    </template>
  </Test>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./Child.vue";
import Son from "./Son.vue";
import Sister from "./Sister.vue";
import Test from "./Test.vue";

export default defineComponent({
  name: "App",
  components: {
    Child,
    Son,
    Sister,
    Test,
  },
  data() {
    return {
      name: "jack",
      age: 18,
      count: 0,
    };
  },
  mounted() {
    // console.log(this.$on);
  },
  methods: {
    setAge() {
      this.age++;
    },
  },
});
</script>
